<template>
    <div class="acLayout">
        <template v-if="!isListArr['isList']">
            <tg-tags :tagArr="tagArr" @changeData="initData" :isHiddenBtn="true">
                <template #title>
                    <span>专栏文章</span>
                </template>
            </tg-tags>
        </template>
        <template v-else>
            <tg-tags :tagArr="isListArr['tags']" @changeData="isListArr['fun']" :isHiddenBtn="true">
                <template #title>
                    <span class="selTitle" :style="changeTypeSty('article')" @click="changeShowList('article')">专栏文章</span>
                    <span>|</span>
                    <span class="selTitle" :style="changeTypeSty('list')" @click="changeShowList('list')">专栏文集</span>
                </template>
            </tg-tags>
        </template>
        
        <div class="infoBox" v-if="isListArr['title'] === 'article'" v-loading="loading" element-loading-text="Loading..." element-loading-background="white">
            <p v-for="item in info?.articles" :key="item.id">
                <articles-item
                    :id="item.id"
                    :title="item.title"
                    :ctime="item.ctime"
                    :banner_url="item.image_urls[0]"
                    :summary="item.summary"
                    :stats="item.stats"
                    :category_name="item.category.name"
                >
                </articles-item>
            </p>
        </div>
        <div v-else class="infoListBox" v-loading="loading" element-loading-text="Loading..." element-loading-background="white">
            <p v-for="item in infoList?.lists" :key="item.id">
                <article-list-item
                    :id="item.id"
                    :name="item.name"
                    :cover="item.image_url"
                    :count="item.articles_count"
                    :summary="item.summary"
                    :read="item.read"
                    :update_time="item.update_time"
                ></article-list-item>
            </p>
        </div>
        <div class="pagination">
            <el-config-provider :locale="zhCn">
                <el-pagination  background 
                                layout="prev, pager, next, jumper" 
                                :current-page="pageVal.size"
                                :total="isListArr['pageTotal']" 
                                :default-page-size="12" 
                                prev-text="上一页"
                                next-text="下一页"
                                @current-change="changePage"/>
            </el-config-provider>
        </div>
    </div> 
</template>

<script lang="ts" setup>
import { tgTags, articlesItem, articleListItem } from '@/pages/up/components'
import { get } from '@/http/axios'
import { useStore } from 'vuex'
import { getWbiKeys,encWbi } from '@/api/getVideo'
import { onBeforeMount, reactive, ref, computed, watch } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { changeNowRoute, baseRouteGetStatus } from '@/router/changeUrl'
import { useRouter } from 'vue-router'

interface Props{
    mid:string
}
type tagType = {
    title:string
    label:string
}
interface isListArrType {
    title:string    //当前选中的标题
    fun:Function    //当前选中标题获取数据的函数
    tags:Array<tagType> //当前选中标题的tags数组
    isList:boolean      //当前是否存在其他可选标题
    pageTotal:number    //分页中的总数
}
const props = defineProps<Props>()
const router = useRouter()
let info = ref()
const pageVal = reactive({
    size:1,
    total:0,
    listTotal:0
})
const tagArr = reactive<Array<tagType>>([
    { title:'最新发布',label:'publish_time' },
    { title:'最多阅读',label:'view' },
    { title:'最多收藏',label:'fav' }
])
const tagListArr = reactive<Array<tagType>>([
    { title:'最近更新',label:'0' },
    { title:'最多阅读',label:'1' },
])
const isListArr = reactive<isListArrType>({
    title:'article',
    fun:initData,
    tags:tagArr,
    isList:false,
    pageTotal: pageVal.total
})
const store = useStore() 
let infoList = ref()
let loading = ref<boolean>(true)
const map = new Map()

onBeforeMount(() => {
    baseRouteGetStatus(router,map)
    if (map.has('pn')) pageVal.size = Number(map.get('pn'))
    initData()
    initListData()
})
function initData() {
    info.value = []
    loading.value = true
    const obj = changeNowRoute(router,map)
    const wbi_keys = getWbiKeys(store)
    const query = encWbi(
        {
            mid:props.mid,
            pn:1,
            ps:12,
            sort:'publish_time',
            platform:'web',
            web_location:'1550101',
            ...obj
       },
            wbi_keys.img_key, 
            wbi_keys.sub_key
       )
    get('/x/space/wbi/article?' + query).then(res => {
        console.log('专栏',res);
        loading.value = false
        info.value = res.data
        pageVal.total = res.data.count
    }).catch(er => {
        alert('投稿video数据加载失败')
    })
}

function initListData() {
    infoList.value = []
    loading.value = true
    const obj = changeNowRoute(router,map)
    const wbi_keys = getWbiKeys(store)
    const query = encWbi(
        {
            mid:props.mid,
            sort:0,
            web_location:'333.999',
            ...obj
       },
            wbi_keys.img_key, 
            wbi_keys.sub_key
        )
    get('/x/article/up/lists?' + query).then(res => {
        console.log('专栏合集',res);
        loading.value = false
        if (res.data.lists.length) {
            isListArr.isList = true
        }
        infoList.value = res.data
        pageVal.listTotal = res.data.total
    }).catch(er => {
        alert('投稿video数据加载失败')
    })
}
//根据传入的数据改变当前选中的标题 并且改变其内部数据结构（调用函数 tags）
function changeShowList(val:string) {
    if (isListArr['title'] === val) {
        return
    } else if (val === 'article') {
        isListArr.title = 'article'
        isListArr.fun = changeTags
        isListArr.tags = tagArr
        isListArr.pageTotal = pageVal.total
        initData()
    } else {
        isListArr.title = 'list'
        isListArr.fun = changeListTags
        isListArr.tags = tagListArr
        isListArr.pageTotal = pageVal.listTotal
        initListData()
    }
}
const changeTypeSty = computed(() => (val:string) => {
    if (isListArr['title'] === val ) {
        return 'color:#00A1D6;'
    }
})
function changePage(pn: number) {
    pageVal.size = pn
    map.set('pn', pn)
    initData()
}
function changeListTags(val:string) {
    pageVal.size = 1
    map.set('sort', val)
    map.set('pn', 1)
    initListData()
}
function changeTags(val:string) {
    pageVal.size = 1
    map.set('sort', val)
    map.set('pn', 1)
    initData()
}
//只会执行第一次
watch(() =>pageVal.total, (val) => {
    isListArr.pageTotal = val
})
</script>

<style lang="scss" scoped>
@import url(../../assets/css/changePagintoin.scss);
p{
    padding: 0;
    margin: 0;
}
.acLayout{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}
.infoBox{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 20px 0;
    min-height: 150px;
    & p{
        width: 100%;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--el-border-color);
    }
    & p:last-child{
        padding-bottom: 5px;
        border-bottom: none;
    }
}
.infoListBox{
    width: 100%;
    @include flexRowCenter;
    flex-wrap: wrap;
    gap: 40px 20px;
    min-height: 150px;
    & p{
        width: calc(50% - 10px);
        height: 150px;
    }
}
.selTitle{
    cursor: pointer;
}
</style>